<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>删除</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        html,body{
          background: #F8F8F8;
        }
        img{
          max-width: 100%;
        }
        .head{
          position: fixed;
          height:100px;
          line-height: 100px;
          width:100%;
          text-align: center;;
          color:#555;
          font-size: 24px;
          z-index: 9;
          top:0;
          left:0;
          width: 100%;
          background: #F8F8F8;
        }
        .close{
          position: absolute;
          width:50px;
          height:100px;
          line-height: 100px;
          text-align: center;
          left:0;
          top:0;
        }
        .close img{
          width:20px;
          height:20px;
          vertical-align: middle;
          position: relative;
          top:-2px;
        }
        .dogbox{
          padding:0 20px;
          margin-top: 100px;
        }
        .dog{
          margin-bottom:15px;
          height:190px;
          background: #fff;
          padding: 20px;
          border-radius: 20px;
          position: relative;
          overflow:hidden;
        }
        .isone{
          position: absolute;
          z-index: 2;
          border-radius: 4px;
          padding:1px 4px;
          color:#fff;
          font-size: 12px;
          background: #39CD63;
          top:10px;
          left:10px;
        }
        .dog1{
          float:left;
          width:35%;
        }
        .dog2{
          float:left;
          width:65%;
          padding-left: 10px;
        }
        .dog1 div{
          text-align: center;
          font-weight: bold;
          color:#000;
          font-size: 14px;
        }
        .dog21{
          font-weight: bold;
          font-size: 16px;
        }
        .dog22{
          margin: 5px 0;
          color:#999;
          font-size: 12px;
        }
        .dog23 p{
          font-weight: bold;
          margin-bottom: 5px;
          font-size: 13px;
        }
    </style>
</head>

<body>
    <div class="head">
      <div class="close" id="close">
        <img src="../image/left.png" alt="">
      </div>
      狗子图鉴
    </div>
    <div class="dogbox" v-cloak>
      <div class="dog" v-for="item in json">
        <div class="isone" v-if="item.isone == 1">限量</div>
        <div class="dog1">
          <img :src="item.img" alt="">
          <div>{{item.name}}</div>
        </div>
        <div class="dog2">
          <div class="dog21 red">{{item.title}}</div>
          <div class="dog22">获取途径</div>
          <div class="dog23">
            <p v-for="i in item.content">{{i}}</p>
          </div>
        </div>
      </div>
    </div>
</body>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        $api.addEvt($api.byId('close'), 'click', function() {
          api.sendEvent({
            name: 'details',
            extra: {
              key: 'tujian',
            }
          });
          api.closeFrame({
            name: 'tujian'
          });
      });
      var json = [
        {
          name:'全球分红犬',
          img:'../image/app/dog/ic_dog_level47.png',
          isone:1,
          title:'每天获得平台广告收益分红20%',
          content:[
            '①五大洲合成',
            '②两只37级狗随机合成',
            '③个人努力必定获得，进度：0.99%',
          ]
        },
        {
          name:'单身狗',
          img:'../image/app/dog/ic_dog_level42.png',
          isone:0,
          title:'拖入回收站获得5-50元现金红包',
          content:[
            '①两只37级狗随机合成'
          ]
        },
        {
          name:'情侣犬[公]',
          img:'../image/app/dog/ic_dog_level44.png',
          isone:0,
          title:'两只不同性别情侣犬合成获得52元现金红包（可提现）',
          content:[
            '①两只37级狗随机合成'
          ]
        },
        {
          name:'情侣犬[母]',
          img:'../image/app/dog/ic_dog_level43.png',
          isone:0,
          title:'两只不同性别情侣犬合成获得52元现金红包（可提现）',
          content:[
            '①两只37级狗随机合成'
          ]
        },
        {
          name:'亚洲犬',
          img:'../image/app/dog/ic_dog_level45.png',
          isone:0,
          title:'集齐5大洲犬，可召唤全球分红犬',
          content:[
            '①两只37级狗随机合成'
          ]
        },
        {
          name:'非洲犬',
          img:'../image/app/dog/ic_dog_level39.png',
          isone:0,
          title:'集齐5大洲犬，可召唤全球分红犬',
          content:[
            '①两只37级狗随机合成'
          ]
        },
        {
          name:'欧洲犬',
          img:'../image/app/dog/ic_dog_level46.png',
          isone:0,
          title:'集齐5大洲犬，可召唤全球分红犬',
          content:[
            '①两只37级狗随机合成'
          ]
        },
        {
          name:'美洲犬',
          img:'../image/app/dog/ic_dog_level41.png',
          isone:0,
          title:'集齐5大洲犬，可召唤全球分红犬',
          content:[
            '①两只37级狗随机合成'
          ]
        },
        {
          name:'大洋洲犬',
          img:'../image/app/dog/ic_dog_level40.png',
          isone:0,
          title:'集齐5大洲犬，可召唤全球分红犬',
          content:[
            '①两只37级狗随机合成'
          ]
        },
        {
          name:'限时分红犬',
          img:'../image/app/dog/ic_dog_level47.png',
          isone:0,
          title:'可体验5-15分钟全球分红犬',
          content:[
            '①升至第5级必定获得',
            '②每次升级有可能获得',
          ]
        }
      ]
      new Vue({
        el:'.dogbox',
        data:{
          json:json
        }
      })
    }
</script>

</html>
